<template>
  <div class="app-container">
    <div class="filter-container right">
      <el-button
        v-waves
        class="filter-item"
        type="success"
        icon="el-icon-plus"
        @click="dialogFormVisible = true"
      >
        添加
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      ref="dataForm"
    >
      <el-table-column label="编号" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="权益类型" class-name="status-col" width="90">
        <template slot-scope="{ row }">
          {{ row.productType }}
        </template>
      </el-table-column>
      <el-table-column label="权益名称" min-width="150" align="center">
        <template slot-scope="{ row }">
          {{ row.productName }}
        </template>
      </el-table-column>
       <el-table-column label="描述文字" min-width="100" align="center">
        <template slot-scope="{ row }">
          {{ row.note }}
        </template>
      </el-table-column>
      <el-table-column label="限制数量" class-name="status-col" width="90">
        <template slot-scope="{ row }">
          {{ row.limitedQuantity }}
        </template>
      </el-table-column>
      <el-table-column label="领取数量" class-name="status-col" width="90">
        <template slot-scope="{ row }">
          {{ row.pickupQuantity }}
        </template>
      </el-table-column>
      <el-table-column label="剩余数量" class-name="status-col" width="90">
        <template slot-scope="{ row }">
          {{ row.surplusQuantity }}
        </template>
      </el-table-column>
      <el-table-column label="顺序" class-name="status-col" width="90">
        <template slot-scope="{ row }">
          {{ row.sort }}
        </template>
      </el-table-column>
      <el-table-column
        label="能否领取"
        align="center"
        width="110"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.enableSwitch"
            active-text="开"
            inactive-text="关"
            active-color="#13ce66"
            inactive-color="#ff4949"
            style="width:100%;margin-top:10px"
            @change="changeStartStop(row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        align="center"
        width="150"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.enableSwitch1"
            active-text="上架"
            inactive-text="下架"
            active-color="#13ce66"
            inactive-color="#ff4949"
            style="width:100%;margin-top:10px"
            @change="changeStatus(row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="140"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="editLabel(row)">
            编辑
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="findAll"
    />

    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible1" width="90%">
      <el-form :model="form1">
        <el-form-item label="权益类型" :label-width="formLabelWidth">
          <el-select v-model="form1.rightType" placeholder="请选择权益类型">
            <el-option label="视频权益" value="视频权益"></el-option>
            <el-option label="文娱权益" value="文娱权益"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对接权益" :label-width="formLabelWidth">
          <el-select
            v-model="form1.productId"
            clearable
            placeholder="请选择对接权益"
            style="width: 200px;"
            class="filter-item"
          >
            <el-option
              v-for="(item, index) in selectArr"
              :key="index"
              :value="item.productId"
              :label="item.productName"
            >
              {{ item.productName }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权益名称" label-width="70px">
          <el-input v-model="form1.productName"></el-input>
        </el-form-item>
        <el-form-item label="描述文字" label-width="70px">
          <el-input v-model="form1.describe"></el-input>
        </el-form-item>
        <el-form-item label="限制数量" label-width="70px">
          <el-input v-model="form1.limitedQuantity"></el-input>
        </el-form-item>
        <el-form-item label="排序" label-width="70px">
          <el-input v-model="form1.sort"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增 -->
    <el-dialog title="添加" :visible.sync="dialogFormVisible" width="90%">
      <el-form :model="form">
        <el-form-item label="权益类型" :label-width="formLabelWidth">
          <el-select v-model="form.rightType" placeholder="请选择权益类型">
            <el-option label="视频权益" value="视频权益"></el-option>
            <el-option label="文娱权益" value="文娱权益"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对接权益" :label-width="formLabelWidth">
          <el-select
            v-model="form.productId"
            clearable
            placeholder="请选择对接权益"
            style="width: 200px;"
            class="filter-item"
          >
            <el-option
              v-for="(item, index) in selectArr"
              :key="index"
              :value="item.productId"
              :label="item.productName"
            >
              {{ item.productName }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权益名称" label-width="70px">
          <el-input v-model="form.productName"></el-input>
        </el-form-item>
        <el-form-item label="描述文字" label-width="70px">
          <el-input v-model="form.describe"></el-input>
        </el-form-item>
        <el-form-item label="限制数量" label-width="70px">
          <el-input v-model="form.limitedQuantity"></el-input>
        </el-form-item>
        <el-form-item label="排序" label-width="70px">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  add,
  showAllRights,
  update,
  deleteById,
  updateStatus,
} from "@/api/vip";
import waves from "@/directive/waves";
import Pagination from "@/components/Pagination";

export default {
  name: "Channellist",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      id: [],
      productName: "",
      loanAppLabelIds: "",
      sortData: [],
      value: "",
      loanAppId: [],
      selectArr: "",
      dialogFormVisible1: false,
      dialogVisible2: false,
      // 编辑
      form1: {
        id: "",
        productId: "",
        rightType: "",
        productName: "",
        limitedQuantity: "",
        sort: "",
        describe:""
      },
      //新增
      form: {
        productId: "",
        rightType: "",
        productName: "",
        limitedQuantity: "",
        sort: "",
        describe:""
      },
      inviolableRightsDto: {},
      fromConfig: [],
      tableData: [],
      total: 0,
      apptotal: 0,
      channelId: null,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        productId: "",
      },
      channelConf: [],
      dialogFormVisible: false,
      listLoading: false,
    };
  },
  created() {
    this.findAll(this.listQuery);
    this.showAllRights();
  },

  methods: {
    async findAll(listQuery) {
      // if(page){this.listQuery.current = page}
      const res = await list(this.listQuery);
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
      this.tableData.forEach((e) => {
        e.enableSwitch = e.startStop === 1;
        e.enableSwitch1 = e.status === 1;
      });
    },
    // 展示对接权益
    showAllRights() {
      showAllRights().then((res) => {
        if (res.data.code == 200) {
          this.selectArr = res.data.data;
        } else {
          this.$notify({
            title: "业务提示",
            message: res.data.msg,
            type: "fail",
            duration: 2000,
          });
        }
      });
      // console.log(this.total);
    },
    // 修改上下架状态
    changeStatus(row) {
      if (row.status) {
        row.status = 0;
      } else {
        row.status = 1;
      }
      const eswitch = { status: row.status, id: row.id };
      updateStatus(eswitch).then((res) => {
        if (res.data.code == 200) {
          this.$notify({
            title: "更新配置",
            message: "更新成功！",
            type: "success",
            duration: 2000,
          });
          this.findAll();
        } else {
          this.$notify({
            title: "更新配置",
            message: "更新失败！",
            type: "fail",
            duration: 2000,
          });
        }
      });
    },
    // 修改能否领取
    changeStartStop(row) {
      // 开关状态：0关 1开
      if (row.startStop) {
        row.startStop = 0;
      } else {
        row.startStop = 1;
      }
      const eswitch = { startStop: row.startStop, id: row.id };
      updateStatus(eswitch).then((res) => {
        if (res.data.code == 200) {
          this.$notify({
            title: "更新配置",
            message: "更新成功！",
            type: "success",
            duration: 2000,
          });
          this.findAll();
        } else {
          this.$notify({
            title: "更新配置",
            message: "更新失败！",
            type: "fail",
            duration: 2000,
          });
        }
      });
    },
    //编辑
    editLabel(row) {
      console.log(row);
      this.form1.id = row.id;
      this.form1.productId = row.productId;
      this.form1.rightType = row.productType;
      this.form1.productName = row.productName;
      this.form1.limitedQuantity = row.limitedQuantity;
      this.form1.sort = row.sort;
      this.form1.describe= row.note;
      this.dialogFormVisible1 = true;
    },
    submit() {
      let inviolableRightsDto = this.form1;
      update(JSON.parse(JSON.stringify(inviolableRightsDto))).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.dialogFormVisible1 = false;
          this.$notify({
            title: "业务提示",
            message: "添加成功",
            type: "success",
            duration: 2000,
          });
          (this.form.productId = ""),
            (this.form.rightType = ""),
            (this.form.productName = ""),
            (this.form.limitedQuantity = ""),
            (this.form.sort = ""),
            this.findAll();
        } else {
          this.$notify({
            title: "业务提示",
            message: res.data.msg,
            type: "fail",
            duration: 2000,
          });
        }
      });
    },
    // 删除
    handleDelete(row) {
      var that = this;
      this.$confirm("删除提示！", "确认删除吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        deleteById({ id: row.id }).then((res) => {
          if (res.data.code === 200) {
            that.findAll();
          } else {
            this.$notify({
              title: "错误",
              message: res.data.msg,
              type: "fail",
              duration: 2000,
            });
          }
        });
      });
    },
    quxiao() {
      this.dialogFormVisible = false
      this.form.productId = "",
      this.form.rightType = "",
      this.form.productName = "",
      this.form.limitedQuantity = "",
      this.form.sort = "";
    },
    // 添加
    add() {
      this.$confirm("新增提示！", "确认新增吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.inviolableRightsDto = this.form;
        // console.log(this.inviolableRightsDto);
        add(this.inviolableRightsDto).then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.dialogFormVisible = false;
            this.$notify({
              title: "业务提示",
              message: "新增成功",
              type: "success",
              duration: 2000,
            });
            (this.form.productId = ""),
              (this.form.rightType = ""),
              (this.form.productName = ""),
              (this.form.limitedQuantity = ""),
              (this.form.sort = ""),
              this.findAll();
          } else {
            this.$notify({
              title: "业务提示",
              message: res.data.msg,
              type: "fail",
              duration: 2000,
            });
          }
        });
      });
    },
  },
};
</script>

<style scoped>
.pic {
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(35, 248, 124);
}
.fail {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name {
  margin-left: 50px;
  margin-top: 10px;
  color: rgb(172, 176, 177);
}
.title {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}
.box {
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}
.nick {
  font-size: 30px;
  font-weight: 600;
}
.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}
.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.right {
  display: flex;
  flex-direction: row-reverse;
}
</style>
